<template>
  <div class="wrapper">
    <common-back :content="title"></common-back>
    <van-loading class="v-loading"
                 size="30px"
                 color="white"
                 v-show="!(list.length>0)" />
    <common-scroll class="scroll"
                   ref="scroll"
                   :listenScroll="listenScroll"
                   @pullingUp="handlePullUp"
                   :data="list">
      <div class="scroll-content">
        <ul class="recommend-list">
          <li v-for="item of newList"
              :key="item.goods_id">
            <common-card :info="item"></common-card>
          </li>
        </ul>
        <load-more v-show="loadMore"
                   :title="loadMoreTitle"></load-more>
      </div>
    </common-scroll>
    <tab></tab>
  </div>
</template>
<script>
import CommonScroll from 'common/scroll/scroll'
import CommonBack from 'common/headerBack/back'
import Tab from '../components/tab'
import CommonCard from 'common/card/card'
import LoadMore from 'common/loadMore/loadmore'
export default {
  name: '',
  components: {
    CommonScroll,
    CommonBack,
    Tab,
    CommonCard,
    LoadMore
  },
  data () {
    return {
      title: '分类',
      list: [],
      newList: [], // 排序
      page: 1,
      loadMore: false, // 加载更多
      total: 0, // 推荐总条数
      loadMoreTitle: '加载中...',
      listenScroll: true
    }
  },
  created () {
    this.getList()
    this.listenScroll = true
  },
  methods: {
    getList () {
      let index = JSON.parse(this.$localStorage.get('INDEX'))
      if (index !== null) {
        index = index ? 'index' : ''
      } else {
        index = ''
      }
      const id = this.$route.params.id
      const page = this.page
      this.$api.classify.list({ category_id: id, page, index })
        .then(this.getListSucc)
        .catch((e) => {
          this.longTimeRequest()
          this.$errorTip()
        })
    },
    getListSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.total = data.total
        this.list = this.list.concat(...data.lists)
        this.timeSort(this.list)
        this.loadMore = false
      }
    },
    // 上拉加载更多
    handlePullUp () {
      if (this.loadMore) return
      this.loadMore = true
      const flag = this.judge()
      if (flag) {
        this.page += 1
        this.getList()
      } else {
        this.loadMoreTitle = '没有更多'
      }
      this.$refs.scroll.refresh()
      this.$refs.scroll.finishPullUp()
    },
    // 判断总条数是否大于列表长度
    judge () {
      const total = this.total
      const length = this.list.length
      return total > length
    },
    // 时间排序
    timeSort (list) {
      this.newList = []
      list.sort((a, b) => {
        return a.goods_price - b.goods_price
      })
      this.newList.push(...list)
    },
    // 加载过时，判定
    longTimeRequest () {
      this.loadMore = this.loadMoreTitle === '没有更多'
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  initPosition()
  top 88px
  background-color $space
  z-index 20

  .scroll
    top 100px
    background-color $space

    .scroll-content
      padding-bottom 10px
      box-sizing border-box

      .recommend-list
        background-color $recommend_bgc
        width 100%
        display flex
        justify-content space-between
        flex-wrap wrap

        li
          width 372px
          height 516px
          background $common_bgc
          border-radius 4px
          padding()
          padding-top 12px
          margin-bottom 7px

.v-loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  z-index 100
  padding-left 10px
  padding-right 10px
  padding-top 10px
  padding-bottom 10px
  border-radius 3px
  background-color rgba(0, 0, 0, 0.5)
</style>
